<template>
  <div class="app-container">
    <el-button type="primary" size="small" @click="onclickAddDepartment">添加部门</el-button>
    <el-alert title="配置说明：【1】删除某个部门时，必须当前部门人数为0！【2】每个部门都应该有直接/分管/主要领导,否则会影响流程!【3】管理处是主管部门不可删除!" type="warning" />
    <div style="padding: 5px;" />
    <!-- {{list}} -->
    <el-table :data="list" border row-key="id" align="left" default-expand-all>
      <el-table-column label="部门名称" align="left">
        <template slot-scope="scope">
          {{ scope.row.name }}<i v-if="scope.row.up_department==null" style="color: red;">(主管部门)</i>
        </template>
      </el-table-column>

      <el-table-column label="当前部门人数" align="center">
        <template slot-scope="scope">
          {{ scope.row.cnt }}人
        </template>
      </el-table-column>

      <el-table-column label="直接领导" align="center">
        <template slot-scope="scope">
          {{ scope.row.zhijie_lingdao_name }}
        </template>
      </el-table-column>

      <el-table-column label="分管领导" align="center">
        <template slot-scope="scope">
          {{ scope.row.fenguan_lingdao_name }}
        </template>
      </el-table-column>

      <el-table-column label="主要领导" align="center">
        <template slot-scope="scope">
          {{ scope.row.zhuyao_lingdao_name }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" size="mini" plain @click="showModifyDepartDialog(scope.$index)">编辑部门</el-button>
            <el-button
              v-if="scope.row.cnt==0 && scope.row.up_department != null"
              type="danger"
              size="mini"
              plain
              @click="onClickDelDepartment(scope.row.id)"
            >删除</el-button>
            <el-button
              v-if="scope.row.cnt>0"
              type="primary"
              size="mini"
              plain
              @click="chakanDepartMembers(scope.row.id)"
            >部门人员</el-button>

          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新建部门" width="30%" :visible.sync="addDepartmentDialog.visible">
      <el-form>
        <el-form-item label="部门名称">
          <el-input v-model="addDepartmentDialog.departmentName" />
        </el-form-item>
        <el-form-item label="直接领导">
          <el-cascader v-model="addDepartmentDialog.zhijielingdaoid" :options="userList" clearable />
        </el-form-item>
        <el-form-item label="分管领导">
          <el-cascader v-model="addDepartmentDialog.fenguanlingdaoid" :options="userList" clearable />
        </el-form-item>
        <el-form-item label="主要领导">
          <el-cascader v-model="addDepartmentDialog.zhuyaolingdaoid" :options="userList" clearable />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDepartmentDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="addDepart">新 建</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑部门" width="30%" :visible.sync="modifyDepartmentDialog.visible">
      <el-form>
        <el-form-item label="部门名称">
          <el-input v-model="modifyDepartmentDialog.name" />
        </el-form-item>
        <el-form-item label="直接领导">
          <el-cascader v-model="modifyDepartmentDialog.zhijielingdaoId" :options="userList" clearable />
        </el-form-item>
        <el-form-item label="分管领导">
          <el-cascader v-model="modifyDepartmentDialog.fenguanlingdaoId" :options="userList" clearable />
        </el-form-item>
        <el-form-item label="主管领导">
          <el-cascader v-model="modifyDepartmentDialog.zhuyaolingdaoId" :options="userList" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyDepartmentDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="modifydepartment">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="部门人员" width="50%" :visible.sync="memberListDialog.visible">
      <el-table :data="memberListDialog.list" border align="center">
        <el-table-column label="人员名称" align="left">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="部门名称" align="left">
          <template slot-scope="scope">
            {{ scope.row.departName }}
          </template>
        </el-table-column>
        <el-table-column label="岗位名称" align="left">
          <template slot-scope="scope">
            {{ scope.row.posName }}
          </template>
        </el-table-column>

      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="memberListDialog.visible = false">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  websock
} from '@/websock'
import {
  MessageBox
} from 'element-ui'
import {
  logger
} from 'runjs/lib/common'
export default {
  data() {
    return {
      list: null,
      userList: [],
      departList: [],
      memberListDialog: {
        visible: false,
        departId: 0,
        list: null
      },
      addDepartmentDialog: {
        visible: false,
        departmentName: '',
        zhijielingdaoId: 0, // 直接领导
        fenguanlingdaoId: 0, // 分管领导
        zhuyaolingdaoId: 0, // 主要领导
        upDepart: 1
      },
      modifyDepartmentDialog: {
        visible: false,
        id: 0,
        name: '',
        zhijielingdaoId: 0, // 直接领导
        fenguanlingdaoId: 0, // 分管领导
        zhuyaolingdaoId: 0 // 主要领导
      }
    }
  },
  async created() {
    this.fetchData()

    const res = await websock.getContactList()
    const userList = []
    for (let i = 0; i !== res.length; i++) {
      userList.push({
        value: i + '',
        label: res[i].name,
        children: []
      })
      for (let j = 0; j !== res[i].userList.length; j++) {
        userList[i].children.push({
          value: res[i].userList[j].uid,
          label: res[i].userList[j].name
        })
      }
    }
    this.userList = userList
  },
  methods: {
    fetchData() {
      websock.getDepartList().then(data => {
        this.list = data
        console.log('get depart list', this.list)
      })
    },
    onclickAddDepartment() {
      this.addDepartmentDialog.visible = true
      this.addDepartmentDialog.departmentName = ''
      this.addDepartmentDialog.upDepart = 1
    },
    addDepart() {
      this.addDepartmentDialog.visible = false
      websock.addDepart({
        departmentName: this.addDepartmentDialog.departmentName,
        upDepart: this.addDepartmentDialog.upDepart
      }).then(() => {
        this.fetchData()
      })
    },
    onClickDelDepartment(id) {
      MessageBox.confirm('是否删除部门', '是否删除部门', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        websock.delDepart({
          id
        }).then(() => {
          this.fetchData()
        })
      })
    },
    async chakanDepartMembers(id) {
      this.memberListDialog.list = null
      const res = await websock.departMembers({
        id
      })
      console.log('chakan depart members', res)
      this.memberListDialog.departId = id
      this.memberListDialog.list = res
      this.memberListDialog.visible = true
    },
    async setDepartLingdao(uid) {
      try {
        await websock.setDepartLingdao({
          departId: this.memberListDialog.departId,
          uid
        })
        this.fetchData()
      } catch (err) {
        this.$message.error(err.message || 'error')
      }
    },
    showModifyDepartDialog(idx) {
      this.modifyDepartmentDialog.id = this.list[idx].id
      this.modifyDepartmentDialog.name = this.list[idx].name
      this.modifyDepartmentDialog.zhijielingdaoId = []
      this.modifyDepartmentDialog.fenguanlingdaoId = []
      this.modifyDepartmentDialog.zhuyaolingdaoId = []
      this.modifyDepartmentDialog.visible = true
    },

    async modifydepartment() {
      console.log('modify department', this.modifyDepartmentDialog)
      if (!this.modifyDepartmentDialog.name) return this.$message.error('请输入部门名称')
      if (this.modifyDepartmentDialog.zhijielingdaoId.length == 0) return this.$message.error('请选择直接领导')
      if (this.modifyDepartmentDialog.fenguanlingdaoId.length == 0) return this.$message.error('请选择分管领导')
      if (this.modifyDepartmentDialog.zhuyaolingdaoId.length == 0) return this.$message.error('请选择主要领导')
      try {
        await websock.modifyDepartment({
          id: this.modifyDepartmentDialog.id,
          name: this.modifyDepartmentDialog.name,
          zhijielingdaoId: this.modifyDepartmentDialog.zhijielingdaoId[1],
          fenguanlingdaoId: this.modifyDepartmentDialog.fenguanlingdaoId[1],
          zhuyaolingdaoId: this.modifyDepartmentDialog.zhuyaolingdaoId[1]
        })
        this.modifyDepartmentDialog.visible = false
        this.fetchData()
      } catch (err) {
        logger.error(err)
        this.$message.error(err.message || 'error')
      }
    }
  }
}
</script>
